<!--
 * 图标选择器
 * @param value  需要绑定的值
 * @param data  需要循环的数组 必传
 * @example  <icon-select ref="iconPicker" v-model="icon"/>
 * @returns {*}
-->

<template>
  <div class="icon-picker-wrap">
    <e-icon-picker ref="iconPicker"
                   v-model="value"
                   :options="options"
                   @input="handleInput" />
  </div>
</template>

<script>
import { analyzingIconForIconfont } from "@/libs/util";
import iconfont from "@/assets/iconfont/iconfont.json";

export default {
  name: "Example",
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      icon: "",
      options: {
        FontAwesome: false,
        ElementUI: false,
        eIcon: false, //自带的图标，来自阿里妈妈
        eIconSymbol: false, //是否开启彩色图标
        addIconList: [],
        removeIconList: []
      }
    };
  },
  mounted () {
    this.addIcon();
  },
  methods: {
    addIcon () {
      let icon = analyzingIconForIconfont(iconfont);
      this.options.addIconList = icon.list;
    },
    handleInput (value) {
      this.$emit("input", value);
    }
  }
};
</script>
<style>
.fas-icon-list {
  display: flex !important;
  flex-flow: wrap;
}
.fas-icon-list li {
  width: 40px;
  height: 40px;
  margin: 5px;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
}
</style>
